<template>
  <div class="introduce app-container cooperate">
    <h2>{{ $t('CreditModule3Title') }}</h2>
    <div class="introduce-bank">
      <div style="border: none;" @click="handleClick('https://www.jpmorganchase.com/')">
        <img src="@/assets/images/credit-cooperate-img1.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.bankofamerica.com/')">
        <img src="@/assets/images/credit-cooperate-img2.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.wellsfargo.com/')">
        <img src="@/assets/images/credit-cooperate-img3.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.citi.com/')">
        <img
         src=""
         alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.goldmansachs.com/')">
        <img src="@/assets/images/credit-cooperate-img5.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.hsbc.com/')">
        <img src="@/assets/images/credit-cooperate-img6.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.ubs.com/sg/en.html')">
        <img src="@/assets/images/credit-cooperate-img7.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.credit-suisse.com/sg/en.html')">
        <img src="@/assets/images/credit-cooperate-img8.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.barclays.co.uk/')">
        <img src="@/assets/images/credit-cooperate-img9.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.sc.com/en/')">
        <img src="@/assets/images/credit-cooperate-img10.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://10bestpersonalloans.com/go/pmax-usa-eng-d-g.html#o77')">
        <img src="@/assets/images/credit-cooperate-img11.png" alt="">
      </div>
      <div style="border: none;" @click="handleClick('https://www.mastercard.com/global/en.html')">
        <img
         src=""
         alt="">
      </div>
    </div>
  </div>
</template>
<script setup>
const handleClick = (url) => {
  window.open(url, '_blank')
}
</script>
<style scoped lang="scss">
.credit-container .introduce{
  padding: 82px 0px 150px;
}
.credit-container .introduce h2 {
  width: 100%;
  text-align: center;
  margin: 0px auto;
  font-weight: 600;
  font-size: 36px;
  color: rgb(51, 51, 51);
  position: relative;
}
.credit-container .introduce h2::after {
  content: " ";
  position: absolute;
  left: 48%;
  bottom: -9px;
  width: 54px;
  height: 4px;
  border-radius: 3px;
  background-color: var(--color-main);
}
.credit-container .cooperate .introduce-bank{
  display: flex;
  flex-wrap: wrap;
}

.credit-container .cooperate .introduce-bank div{
  width: calc(25% - 8px);
  min-width: calc(25% - 8px);
  max-width: calc(25% - 8px);
  height: 80px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(235, 235, 235);
  border-radius: 4px;
  display: flex;
  vertical-align: middle;
  margin: 56px 10px 0px 0px;
  cursor: pointer;
  will-change: filter;
  transition: filter 0.8s ease 0s;
}

.credit-container .cooperate .introduce-bank div:nth-child(4n+4) {
  margin-right: 0px;
}

.credit-container .cooperate .introduce-bank div:hover {
  filter: drop-shadow(0 0 4px var(--color-main));
}

.credit-container .cooperate .introduce-bank div img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}

</style>
